<template>
  <xy-page>
    <div class="viewSkin">
      <el-form status-icon>
        <el-form-item label="PC观看页布局:" :label-width="labwidth">
          <span class="mgl20">
            <img src="/static/images/wendan.png" class="cursor imgwidth" @click="togglePay " :class="{active: isActive }">
          </span>
          <span class="mgl20">
            <img src="/static/images/video.png" class="cursor imgwidth" @click="togglePay2" :class="{ active: isActive2 }">
          </span>
        </el-form-item>
        <el-form-item label="讲师占位图:" :label-width="labwidth">
          <div class="w300 graycolor">图片建议尺寸：960 x 720，图片大小不超过2M，支持jpg、jpeg、png、gif格式</div>
        </el-form-item>
        <el-form-item :label-width="labwidth">
          <xy-upload @uploadImage="logoImg" :imgSize="2">
            <el-button class="ib">上传图片</el-button>
            <el-button @click="clearset">恢复默认</el-button>
          </xy-upload>
        </el-form-item>
        <el-form-item :label-width="labwidth">
          <div>当前预览：</div>
          <img v-if="imageUrl" :src="imageUrl" class="avatar ft10">
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon ft10"></i> -->
          <img v-else class="el-icon-plus avatar-uploader-icon ft10" src="/static/images/look.png">
        </el-form-item>

        <el-form-item :label-width="labwidth">
          <el-button>保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isActive2: false,
      labwidth: '150px',
      imageUrl: ''
    };
  },
  methods: {
    logoImg(param){//获取上传的图片
      this.imageUrl=param
    },
    clearset() {
      this.imageUrl = "";
    },
    togglePay() {
      this.isActive = true;
      this.isActive2 = false;
    },
    togglePay2() {
      this.isActive2 = true;
      this.isActive = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.viewSkin {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px solid;
  }
  .avatar {
    width: 300px;
    height: 120px;
    border: 1px solid #ccc;
  }
  .graycolor {
    margin-top: 10px;
    color: #ccc;
    line-height: 20px;
  }
  .imgwidth {
    padding: 11px;
  }
  .active {
    border: 1px solid #409eff;
    padding: 10px;
  }
}
</style>
